<template>
  <div>
    <p v-if="readonly == false" style="text-align: right;">
      <el-button type="primary" @click="addMsg">添加抄送配置</el-button>
    </p>
    <w-table
      :data="msgList"
      :columns="columns"
      :is-paging="false"
      row-key="Id"
    >
      <template slot="msgType" slot-scope="e">
        {{ getText(FlowMsgType, e.row.MsgType) }}
      </template>
      <template slot="receiveRange" slot-scope="e">
        {{ getText(FlowMsgReceiveRange, e.row.ReceiveRange) }}
      </template>
      <template slot="empName" slot-scope="e">
        <el-tag v-for="item in e.row.EmpName" :key="item">{{ item }}</el-tag>
      </template>
      <template slot="action" slot-scope="e">
        <el-button
          v-if="readonly== false"
          icon="el-icon-edit"
          size="mini"
          type="primary"
          circle
          @click="editMsg(e.row)"
        />
        <el-button
          v-if="readonly== false"
          size="mini"
          icon="el-icon-delete"
          type="danger"
          circle
          @click="dropMsg(e.row)"
        />
      </template>
    </w-table>
    <nodeMsgEdit :id="msgId" :form-id="formId" :flow-id="flowId" :node-id="nodeId" :nodes="nodes" :visible.sync="msgVisible" @close="closeMsg" />
  </div>
</template>

<script>
import { FlowMsgType, FlowMsgReceiveRange } from '@/flow/config/flowConfig'
import { Gets, Delete } from '@/flow/api/flowNodeMsg'
import nodeMsgEdit from './nodeMsgEdit.vue'
export default {
  components: {
    nodeMsgEdit
  },
  props: {
    nodeId: {
      type: String,
      default: null
    },
    flowId: {
      type: String,
      default: null
    },
    formId: {
      type: String,
      default: null
    },
    nodes: {
      type: Array,
      default: null
    },
    readonly: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      FlowMsgType,
      FlowMsgReceiveRange,
      msgId: null,
      msgVisible: false,
      columns: [{
        key: 'MsgType',
        title: '消息类型',
        align: 'center',
        minWidth: 100,
        slotName: 'msgType'
      }, {
        key: 'Show',
        title: '抄送说明',
        align: 'left',
        minWidth: 300
      }, {
        key: 'action',
        title: '操作',
        align: 'left',
        width: 100,
        slotName: 'action'
      }],
      msgList: []
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.loadNodeMsg()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    addMsg() {
      this.msgId = null
      this.msgVisible = true
    },
    getText(list, val) {
      const item = list.find(c => c.value === val)
      if (item == null) {
        return null
      }
      return item.text
    },
    editMsg(row) {
      this.msgId = row.Id
      this.msgVisible = true
    },
    dropMsg(row) {
      const title = '确认删除（' + row.TemplateName + '）消息?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.loadNodeMsg()
    },
    closeMsg(isRefresh) {
      if (isRefresh) {
        this.loadNodeMsg()
      }
    },
    async loadNodeMsg() {
      this.msgList = await Gets(this.nodeId)
    }
  }
}
</script>
